<template>
  <el-container>
    <el-card class="home_header"><el-header>
        <div class="home_header_logo"><span>THINK</span></div>
        <div class="home_header_logout"><el-button plain @click="loginOut">退出登录</el-button></div>
      </el-header></el-card>
    <el-container>
      <el-card class="home_aside"><el-aside width="200px">
          <el-menu :default-active="$route.path" router class="home_aside_menu">
            <el-menu-item index="/user_info">
              <i class="el-icon-user"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="/page1">
              <i class="el-icon-user"></i>
              <span slot="title">页面1</span>
            </el-menu-item>
            <el-menu-item index="/page2">
              <i class="el-icon-user"></i>
              <span slot="title">页面2</span>
            </el-menu-item>
            <el-menu-item index="/page3">
              <i class="el-icon-user"></i>
              <span slot="title">页面3</span>
            </el-menu-item>

          </el-menu></el-aside></el-card>
      <el-container>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
    <el-footer class="home_footer">
      <div class="home_footer_copyright"><span>Power by think</span></div>
    </el-footer>
  </el-container>
</template>

<script>

export default {
  methods: {
    loginOut() {
      this.$store.dispatch('user/loginOut').then(res => {
        if (res) {
          {
            this.$message.warning("退出登录成功！")
            this.$router.push("/login");
          }
        }
      });

    },
  }
}
</script>
<style scoped>
.home_header {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  height: 12vh;
  background: #fff;
}

.home_header_logo {
  margin-top: 10px;
  float: left;
  color: #888;
}

.home_header_logo span {
  margin-left: 20px;
}

.home_header_logout {
  float: right;
  width: 5rem;
}

.home_aside {
  height: 75vh;
  background: #fff;
}

.home_aside_menu {
  height: 75vh;
}

::v-deep .el-menu {
  border: 0px;
}

.home_footer {
  display: flex;
  height: 10vh !important;
  background: #fff;
  color: #888;
}

.home_footer_copyright {
  margin: auto;
}</style>
